<template>
  <view class="level4 flex flex-col">
    <image class="level4-bg" src="https://app5.shuguostar.cn/imgs/images/answer/bg.png" />
    <NavigationBar :navigation-title="`第${thday}关`" :is-landscape="true" :go-back="closeOverlay" />
    <view class="answer-content flex flex-1 flex-col items-center transition">
      <view class="answer-progrss item-center flex">
        <view class="progress" :style="{ width: `${((616 / total) * (questionIndex)) * hDivideW}rpx` }" />
        <text class="text">
          {{ `${questionIndex}/${total}` }}
        </text>
      </view>

      <LongPicItem ref="longPicItemRef" :question="question" @next="next" @next-game="nextGame" />
    </view>

    <image class="submit-btn" src="https://app5.shuguostar.cn/imgs/images/demo/submit.png" @click="handleSumbit" />

    <up-overlay :show="showOverlay" :opacity="0.8">
      <view class="finish-warp flex flex-col items-center">
        <image class="finish-text" src="https://app5.shuguostar.cn/imgs/images/answer/text.png" />
        <image class="finish-bg" src="https://app5.shuguostar.cn/imgs/images/answer/icon_bg.png" />
        <image class="finish-ip" src="https://app5.shuguostar.cn/imgs/images/answer/IP_1.png" />

        <view class="finish-content">
          <text class="text">
            正确率<text class="big-text">
              {{ Number(answerResult?.resultRate) * 100 }}
            </text>%
          </text>
        </view>

        <image class="close-icon" src="https://app5.shuguostar.cn/imgs/images/answer/icon_close.png" @click="closeOverlay" />
      </view>
    </up-overlay>
  </view>
</template>

<script setup lang="ts">
import data from './data.json';
import LongPicItem from '@/pages/views/answer/components/longPicItem.vue';
import NavigationBar from '@/components/navigation-bar/index.vue';
import type { LongPicQuestion } from '@/pages/views/demo/type';

const total = ref<number>(0);
const questionList = ref<Array<LongPicQuestion>>();
const question = ref<LongPicQuestion>();
const startIndex = ref<number>(0);

const showOverlay = ref<boolean>(false);
const thday = ref<string>('');

let bgAudioContext: any;
let btnAudioContext: any;
const playAudio = () => {
  bgAudioContext = uni.createInnerAudioContext();
  bgAudioContext.autoplay = true;
  bgAudioContext.loop = true;
  bgAudioContext.volume = 0.4;
  bgAudioContext.src = 'https://app5.shuguostar.cn/imgs/bookVido/audio/bg.mp3';
};

const pauseAudio = () => {
  bgAudioContext?.destroy();
  btnAudioContext?.destroy();
  bgAudioContext = null;
  btnAudioContext = null;
};

const playBtnAudio = (type: number) => {
  btnAudioContext = uni.createInnerAudioContext();
  btnAudioContext.autoplay = true;
  btnAudioContext.src = type === 1 ? 'https://app5.shuguostar.cn/imgs/bookVido/audio/btn_bg.mp3' : 'https://app5.shuguostar.cn/imgs/bookVido/audio/success.mp3';
};

const start = () => {
  question.value = questionList.value?.[startIndex.value];
};

const next = () => {
  playBtnAudio(1);
};

const nextGame = () => {
  setTimeout(() => {
    startIndex.value++;
    start();
  }, 1000);
};
const getData = () => {
  total.value = 0;
  questionList.value = data.level4 as Array<LongPicQuestion>;
  questionList.value.forEach((item) => {
    total.value += item.questionList.length;
  });
  start();
};

const longPicItemRef = ref<InstanceType<typeof LongPicItem> | null>(null);
const answerResult = ref<{ resultRate: number }>();

const questionIndex = computed(() => {
  return startIndex.value * 2 + ((longPicItemRef.value?.answerTextList.length) || ((longPicItemRef.value?.questionIndex || 0) + 1));
});
const handleSumbit = () => {
  longPicItemRef.value?.pauseAudio();
  playBtnAudio(1);
  answerResult.value = { resultRate: 1 };
  console.log('提交成功', question.value, longPicItemRef.value?.answerTextList, longPicItemRef.value?.answerList);
  setTimeout(() => {
    playBtnAudio(2);
    showOverlay.value = true;
  }, 1000);
};

const closeOverlay = () => {
  longPicItemRef.value?.pauseAudio();
  pauseAudio();
  showOverlay.value = false;
  uni.navigateBack();
};

const hDivideW = ref<number>(0);
onLoad((option: any) => {
  thday.value = option.thday;
  uni.getSystemInfo({
    success: (res: any) => {
      hDivideW.value = res.screenHeight / res.screenWidth;
    },
  });

  getData();
  playAudio();
});

// 分享
uni.showShareMenu({
  withShareTicket: true,
  menus: ['shareAppMessage', 'shareTimeline'],
});
onShareAppMessage(() => {
  return {
    title: '雨果读书',
    imageUrl: 'https://app5.shuguostar.cn/imgs/images/home/share.png',
  };
});
</script>

<style lang="scss" scoped>
@function tovmin($rpx){//$rpx为需要转换的字号
  @return #{calc($rpx * 100 / 750)}vmin;
}

.level4 {
  position: relative;
  min-height: 100%;
  padding-top: tovmin(60);
  background: linear-gradient( 90deg, #4FB0FE 0%, #2B9BF6 100%);

  .level4-bg {
    position: absolute;
    top: tovmin(110);
    left: tovmin(72);
    width: 666rpx;
    height: 124rpx;
  }

  .answer-content {
    height: 100%;
    padding: tovmin(40);
    overflow: auto;

    .answer-progrss {
      position: relative;
      width: tovmin(620);
      height: tovmin(48);
      background: rgba(0,0,0,0.5);
      border-radius: tovmin(24);
      border: tovmin(2) solid rgba(255,255,255,0.08);
      overflow: hidden;

      .progress {
        height: 100%;
        background: #FCD24E;
        border-radius: tovmin(20);
      }

      .text {
        position: absolute;
        top: 0;
        right: tovmin(32);
        font-size: tovmin(24);
        line-height: tovmin(48);
        color: #fff;
      }
    }
  }

  .answer-btn {
    background: #fff;
    padding: tovmin(16) tovmin(40);
    z-index: 3;

    .btn-text {
      display: block;
      width: tovmin(670);
      font-size: tovminf(32);
      line-height: tovmin(92);
      text-align: center;
      background: #4AAAF8;
      color: #fff;
      border-radius: tovmin(46);
    }
  }

  .submit-btn {
    position: absolute;
    right: tovmin(60);
    bottom: tovmin(130);
    width: tovmin(64);
    height: tovmin(64);
  }

  .finish-warp {
    position: relative;

    .finish-text {
      position: relative;
      width: tovmin(384);
      height: tovmin(64);
      z-index: 1;
    }

    .finish-bg {
      position: absolute;
      top: tovmin(40);
      width: tovmin(540);
      height: tovmin(380);
    }

    .finish-ip {
      position: absolute;
      top: tovmin(108);
      width: tovmin(200);
      height: tovmin(240);
    }

    .finish-content {
      position: relative;
      padding-top: tovmin(304);
      z-index: 3;

      .text {
        display: block;
        font-size: tovmin(28);
        line-height: tovmin(56);
        color: #FFFDF2;

        .big-text {
          font-size: tovmin(40);
          color: #FFF8D9;
        }
      }
    }

    .close-icon {
      margin-top: tovmin(64);
      width: tovmin(64);
      height: tovmin(64);
    }
  }
}

:deep(.u-fade-enter-to) {
  display: flex;
  align-items: center;
  justify-content: center;
}

:deep(.navigation-bar-view) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  font-size: tovmin(32);
  color: #fff;
  background: linear-gradient( 90deg, #4FB0FE 0%, #2B9BF6 100%);
  z-index: 99;

  .back-view {
    position: absolute;
    left: tovmin(30);
  }
}

:deep(.u-input) {
  display: inline-block !important;
  width: tovmin(120) !important;
  padding: tovmin(6) tovmin(9) !important;
  line-height: tovmin(32);
  height: tovmin(44);
  position: relative;
  top: tovmin(10);

  .u-input__content__field-wrapper__field {
    font-size: tovmin(24) !important;
  }
}
</style>
